<template>
  <Modal
    v-model:visible="visibleModule"
    width="500px"
    height="auto"
    class="operation-allot"
    title="调拨"
    :resize="false"
    :maximizable="false"
    cancel-button
    :header-style="{ height: '50px' }"
    :body-style="{ padding: 0 }"
    :ok-button="addModule"
    @close="cancelModal"
  >
    <div class="operation-allot-context">
      <Form :model="formModel" :label-col="{ span: 4 }" layout="vertical">
        <FormItem label="运行节点" name="currentNodeId" v-bind="validateInfos.currentNodeId">
          <div class="form-urae-user">
            <Row :gutter="[10, 10]">
              <Col v-for="item in runNodes" :key="item.id" :span="12">
                <div
                  :class="{
                    'form-urae-user-item': true,
                    select: item.id == formModel.currentNodeId,
                  }"
                  @click="doSelectNode({ type: 'currentNodeId', item })"
                >
                  {{ item.text }}
                  <i class="icon fal fa-check" />
                </div>
              </Col>
            </Row>
          </div>
        </FormItem>
        <FormItem
          v-if="selectNodes.multi == '1'"
          label="节点人员"
          name="userNames"
          v-bind="validateInfos.userNames"
        >
          <InputSelectUser
            v-model:value="formModel.userNames"
            config-info=",userIds~userNames,id~text,M"
          />
        </FormItem>
        <FormItem v-else label="节点人员" name="userNames" v-bind="validateInfos.userNames">
          <InputSelectUser
            v-model:value="formModel.userNames"
            config-info=",userIds~userNames,id~text,S"
          />
        </FormItem>
        <FormItem
          v-if="selectNodes.head == '1'"
          label="负责人"
          name="headName"
          v-bind="validateInfos.headName"
        >
          <InputSelectUser
            v-model:value="formModel.headName"
            config-info=",head~headName,id~text,S"
          />
        </FormItem>
      </Form>
    </div>
  </Modal>
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted } from 'vue';
  import { Modal, Form, Row, Col, InputSelect } from '@jecloud/ui';
  import { verifyData } from '@/helper/common';
  import { getRunTasks, adjustRunningNodeAssignee } from '@/api/monitoring/index';
  const useForm = Form.useForm;
  export default defineComponent({
    name: 'WorkflowOperationAllot',
    components: { Modal, Form, FormItem: Form.Item, Row, Col, InputSelectUser: InputSelect.User },
    props: {
      dataInfo: Object,
      beanId: String,
    },
    emits: ['closeModal'],
    setup(props, { emit }) {
      const state = reactive({
        visibleModule: true,
        formModel: {
          currentNodeId: '',
          userNames: '',
          userIds: '',
          head: '',
          headName: '',
        },
        runNodes: [],
        selectNodes: {},
      });
      const rulesRef = reactive({
        currentNodeId: [verifyData.required],
        userNames: [verifyData.required],
      });
      const { resetFields, validate, validateInfos } = useForm(state.formModel, rulesRef, {
        onValidate: (...args) => {},
      });
      const methods = {
        // 确定按钮调用
        addModule: ({ $modal }) => {
          validate()
            .then(() => {
              adjustRunningNodeAssignee({
                currentNodeId: state.formModel.currentNodeId,
                userIds: state.formModel.userIds,
                userNames: state.formModel.userNames,
                head: state.formModel.head,
                headName: state.formModel.headName,
                prod: props.dataInfo.pd,
                piid: props.dataInfo.piid,
                tableCode: props.dataInfo.tableCode,
                funcCode: props.dataInfo.funcCode,
                funcId: props.dataInfo.funcId,
                beanId: props.beanId,
              })
                .then((data) => {
                  emit('closeModal', { type: 'allotShow', refresh: true });
                  Modal.notice(data.message, 'success');
                  $modal.close();
                })
                .catch((e) => {
                  Modal.notice(e.message, 'error');
                  $modal.close();
                });
            })
            .catch((error) => {});
          return false;
        },
        // 弹窗关闭调用
        cancelModal: () => {
          emit('closeModal', { type: 'allotShow' });
        },
        doSelectNode: ({ type, item }) => {
          state.selectNodes = item;
          state.formModel[type] = item.id;
          // 清理数据
          state.formModel.userNames = '';
          state.formModeluserIds = '';
          state.formModelhead = '';
          state.formModelheadName = '';
          // 是否校验负责人
          if (item.head == '1') {
            rulesRef.headName = [verifyData.required];
          } else {
            rulesRef.headName = [];
          }
        },
      };
      const initNodeData = () => {
        getRunTasks({ piid: props.dataInfo.piid }).then((data) => {
          if (data) {
            const nodes = [];
            data.forEach((item) => {
              nodes.push({
                id: item.taskDefinitionKey,
                text: item.taskDefinitionName,
                multi: item.multi,
                head: item.head,
              });
            });
            state.runNodes = nodes;
            // 默认中第一个节点
            state.selectNodes = nodes[0];
            state.formModel.currentNodeId = nodes[0].id;
            // 是否校验负责人
            if (nodes[0].head == '1') {
              rulesRef.headName = [verifyData.required];
            } else {
              rulesRef.headName = [];
            }
          }
        });
      };
      onMounted(() => {
        initNodeData();
      });
      return { ...toRefs(state), ...methods, validateInfos };
    },
  });
</script>
<style lang="less" scoped>
  .operation-allot {
    &-context {
      padding: 10px 40px 20px 40px;
      height: 100%;
      .form-urae-user {
        &-item {
          background-color: #f1f1f1;
          border-radius: 2px;
          cursor: pointer;
          height: 30px;
          line-height: 30px;
          overflow: hidden;
          position: relative;
          text-align: center;
          &::before {
            display: none;
            border: 13px solid transparent;
            border-bottom-color: #3265f5;
            bottom: -12px;
            content: '';
            position: absolute;
            right: -12px;
            transform: rotate(135deg);
          }
          .icon {
            display: none;
            bottom: 0;
            color: #fff;
            font-size: 12px;
            position: absolute;
            right: 0;
            z-index: 1;
          }
        }
        &-item.select {
          background-color: #d6e7ff;
          &::before {
            display: block;
          }
          .icon {
            display: block;
          }
        }
        &-item.select.women {
          background-color: #ffe9e9;
          &::before {
            border-bottom-color: #ffa3a3;
          }
        }
      }
    }
  }
</style>
